<template>
  <view class="search-box">
    <!-- 使用 uni-ui 提供的搜索组件 -->
    <uni-search-bar @input="input" :radius="100" cancelButton="none"></uni-search-bar>
  </view>
</template>

<script>
//  防抖函数
function debounce(fn, wait) {
  // wait 500
  let timer = null;
  return function(...args) {
    //  清除上一次的定时器
    // 第一次触发的时候
    // this ==> vm实例
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(call, args);
    }, wait);
  };
}

function throttle(fn, wait) {
  // 定义一个节流阀
  let flag = false;
  return function(...args) {
    // 先判断节流阀是否开启
    if (flag) return;
    // 开启节流阀
    flag = true;
    // 执行函数
    fn.apply(this, args);
    setTimeout(function() {
      flag = false;
    }, wait);
  };
}

// 节流函数

export default {
  data() {
    return {
      kw: '',
      timer: false
    };
  },
  methods: {
    input: throttle(function(e) {
      this.kw = e;
      console.log(e);
    }, 500),
    input: function(e) {
      console.log(e);
    }
    // input(e) {
    //   // 实现一个输入框的防抖
    //   //  1、稀释事件的执行频率
    //   // 1、事件延时执行
    //   // 2、当事件频繁触发的时候，清除上一次的事件，重新开启一个定时器
    //   // 节流
    //   // 1、设置一个节流阀，单位时间以内只触发一次
    //   if (this.timer) return;
    //   this.timer = true;
    //   console.log(e);
    //   setTimeout(() => {
    //     this.timer = false;
    //   }, 500);
    // }
  }
};
</script>

<style lang="scss">
.search-box {
  position: sticky;
  top: 0;
  z-index: 999;
}
</style>
